<template>
	<el-container class="register-view">
		<!-- 多彩装饰球（6个，与登录页一致） -->
		<div class="decoration decoration-1"></div>
		<div class="decoration decoration-2"></div>
		<div class="decoration decoration-3"></div>
		<div class="decoration decoration-4"></div>
		<div class="decoration decoration-5"></div>
		<div class="decoration decoration-6"></div>
		<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="content">
			<div class="title">
				<img class="logo" src="../../public/logo.png" />
				<div>欢迎成为福Star-IM的用户</div>
			</div>
			<el-form-item label="用户名" prop="userName">
				<el-input type="userName" v-model="registerForm.userName" autocomplete="off" placeholder="用户名(登录使用)"
					maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="nickName">
				<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off" placeholder="昵称"
					maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码"
					maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off" placeholder="确认密码"
					maxlength="20"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" class="primary-red" @click="submitForm('registerForm')">注册</el-button>
				<el-button @click="resetForm('registerForm')">清空</el-button>
			</el-form-item>
			<div class="to-login">
				<router-link to="/login" class="login-link">已有账号,前往登录</router-link>
			</div>
		</el-form>
	</el-container>
</template>

<script>
import Icp from '../components/common/Icp.vue'
export default {
	name: "register",
	components: {
		Icp
	},
	data() {
		var checkUserName = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入用户名'));
			}
			callback();
		};
		var checkNickName = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入昵称'));
			}
			callback();
		};
		var checkPassword = (rule, value, callback) => {
			if (value === '') {
				return callback(new Error('请输入密码'));
			}
			callback();
		};

		var checkConfirmPassword = (rule, value, callback) => {
			if (value === '') {
				return callback(new Error('请输入确认密码'));
			}
			if (value != this.registerForm.password) {
				return callback(new Error('两次密码输入不一致'));
			}
			callback();
		};


		return {
			registerForm: {
				userName: '',
				nickName: '',
				password: '',
				confirmPassword: ''
			},
			rules: {
				userName: [{
					validator: checkUserName,
					trigger: 'blur'
				}],
				nickName: [{
					validator: checkNickName,
					trigger: 'blur'
				}],
				password: [{
					validator: checkPassword,
					trigger: 'blur'
				}],
				confirmPassword: [{
					validator: checkConfirmPassword,
					trigger: 'blur'
				}]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$http({
						url: "/register",
						method: 'post',
						data: this.registerForm
					})
						.then((data) => {
							this.$message.success("注册成功!");
						})
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
}
</script>

<style scoped lang="scss">
// 主题色+多彩装饰球颜色（与登录页一致）
$red-deep-main: #c9182c; // 主深红
$red-deep-dark: #9a0e1e; // 更深红
$red-deep-light: #f8d0d5; // 深红浅版
$white: #ffffff;
// 多彩装饰球颜色
$color-pink: #ff6b8b;
$color-orange: #ff9500;
$color-yellow: #ffd633;
$color-blue: #4dc3ff;
$color-purple: #b366ff;
$color-green: #4dffb8;

.register-view {
	position: fixed;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	justify-content: center; // 居中表单，避免偏移
	align-items: center;

	// 透明背景图片（与登录页一致）
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('../../public/login-bk.png') center center no-repeat;
		background-size: cover;
		opacity: 0.3; // 透明度30%
		z-index: -1;
	}

	/* 装饰小球公共样式 */
	.decoration {
		position: absolute;
		border-radius: 50%;
		opacity: 0.7;
		filter: blur(1px); // 柔和过渡
	}

	/* 1号球：粉色系 */
	.decoration-1 {
		width: 450px;
		height: 450px;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), $color-pink 80%);
		top: -250px;
		right: -100px;
		animation: float 16s infinite ease-in-out;
	}

	/* 2号球：橙色系 */
	.decoration-2 {
		width: 400px;
		height: 400px;
		background: linear-gradient(135deg, $color-orange 30%, rgba(255, 255, 255, 0.2));
		bottom: -200px;
		left: -100px;
		animation: float 12s infinite ease-in-out 1s;
	}

	/* 3号球：红色系（主题色） */
	.decoration-3 {
		width: 300px;
		height: 300px;
		background: linear-gradient(45deg, $red-deep-main 30%, $red-deep-light 100%);
		top: 50%;
		right: 50px;
		transform: translateY(-50%);
		animation: float 8s infinite ease-in-out 0.5s;
	}

	/* 4号球：黄色系 */
	.decoration-4 {
		width: 250px;
		height: 250px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), $color-yellow 70%);
		top: 20%;
		left: 100px;
		animation: float 18s infinite ease-in-out 2s;
	}

	/* 5号球：蓝色系 */
	.decoration-5 {
		width: 220px;
		height: 220px;
		background: linear-gradient(45deg, $color-blue 40%, rgba(255, 255, 255, 0.3));
		bottom: 15%;
		right: 200px;
		animation: float 14s infinite ease-in-out 1.5s;
	}

	/* 6号球：紫色系 */
	.decoration-6 {
		width: 180px;
		height: 180px;
		background: linear-gradient(135deg, $color-purple 30%, rgba(255, 255, 255, 0.2));
		top: 70%;
		left: 300px;
		animation: float 10s infinite ease-in-out 0.8s;
	}

	/* 浮动动画（与登录页一致） */
	@keyframes float {
		0%, 100% { transform: translateY(0) translateX(0); }
		25% { transform: translateY(-60px) translateX(30px); }
		50% { transform: translateY(30px) translateX(-45px); }
		75% { transform: translateY(-30px) translateX(-30px); }
	}

	.content {
		width: 420px; // 注册表单稍宽，适配更多字段
		max-width: 90%; // 小屏幕自适应
		height: auto; // 取消固定高度，避免内容溢出
		padding: 40px 30px; // 内边距放大，适配大字体
		border-radius: 12px;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); // 加深阴影，突出表单
		background: rgba(255, 255, 255, 0.55); // 高透明度白色背景
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		overflow: hidden;

		// 标题：放大字体，与登录页一致
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 60px; // 行高放大
			margin: 20px 0 40px 0; // 间距调整
			font-size: 26px; // 标题字体放大（比登录页稍小，适配文字长度）
			font-weight: 700;
			letter-spacing: 2px;
			text-align: center;
			text-transform: uppercase;
			color: $red-deep-main; // 主题色文字

			.logo {
				width: 60px; // Logo放大
				height: 60px;
				margin-right: 15px;
			}
		}

		// 表单项标签：放大字体
		::v-deep .el-form-item__label {
			font-size: 16px; // 标签字体放大
			color: $red-deep-main; // 标签颜色改为主题色
			font-weight: 500;
		}

		// 输入框：放大文字和高度
		::v-deep .el-input__inner {
			font-size: 16px; // 输入文字放大
			height: 48px; // 输入框高度放大
			border-radius: 8px;
			border-color: $red-deep-light; // 边框色改为浅红
		}
		::v-deep .el-input::placeholder {
			font-size: 16px; // 占位符字体放大
			color: #999;
		}

		// 按钮：放大字体+主题色
		::v-deep .el-button {
			font-size: 16px; // 按钮文字放大
			padding: 12px 24px; // 按钮放大，更易点击
			border-radius: 8px;
			margin-right: 15px;
		}
		// 主按钮（注册）：深红主题
		::v-deep .el-button.primary-red {
			background-color: $red-deep-main;
			border-color: $red-deep-main;
			&:hover, &:focus {
				background-color: $red-deep-dark;
				border-color: $red-deep-dark;
			}
		}
		// 次要按钮（清空）：浅红边框
		::v-deep .el-button:not(.primary-red) {
			color: $red-deep-main;
			border-color: $red-deep-light;
			&:hover {
				background-color: $red-deep-light;
			}
		}

		// 登录链接：放大字体+主题色
		.to-login {
			display: flex;
			flex-direction: row-reverse;
			line-height: 50px; // 行高放大
			text-align: left;
			padding-left: 20px;

			.login-link {
				font-size: 15px; // 链接字体放大
				color: $red-deep-main;
				font-weight: 500;
				&:hover {
					color: $red-deep-dark;
					text-decoration: underline;
				}
			}
		}
	}
}

// 小屏幕适配（与登录页风格统一）
@media (max-width: 576px) {
	.register-view {
		// 缩小装饰球，避免拥挤
		.decoration-1 { width: 300px; height: 300px; }
		.decoration-2 { width: 250px; height: 250px; }
		.decoration-3 { width: 200px; height: 200px; }
		.decoration-4 { width: 150px; height: 150px; }
		.decoration-5 { width: 120px; height: 120px; }
		.decoration-6 { width: 100px; height: 100px; }
	}

	.content {
		padding: 30px 20px !important;
		width: 90% !important;

		.title {
			font-size: 22px !important; // 小屏幕标题缩小
			margin: 10px 0 30px 0 !important;
			.logo { width: 50px; height: 50px; }
		}

		::v-deep .el-form-item__label {
			font-size: 15px !important;
		}

		::v-deep .el-input__inner {
			font-size: 15px !important;
			height: 44px !important;
		}

		::v-deep .el-button {
			font-size: 15px !important;
			padding: 10px 20px !important;
			width: 45% !important; // 按钮占半宽，避免换行
			margin-right: 10px !important;
		}

		.login-link {
			font-size: 14px !important;
		}
	}
}
</style>